<fieldset class="unfoldable">
  <legend>Script</legend>
  <p>Select the commands you want to run when executing. Double click to edit commands.</p>

  <div id="commands">
    <% usage_ids = Command.usage_ids %>
    <%= form.collection_check_boxes(:command_ids, Command.for_stage(form.object), :id, :command) do |b| %>
      <% command = b.object %>
      <% others = usage_ids.count(command.id) - (b.check_box.include?('checked') && form.object.persisted? ? 1 : 0) %>
      <% others_warning = "#{others} others" if others > 0 %>

      <div class="row stage-bar bar">
        <div data-id="<%= b.value %>" class="col-lg-offset-2 col-lg-2 command-checkbox">
          <%= b.check_box %>
        </div>
        <div class="col-lg-8">
          <% klass = "pre-command pre-inline #{command.global? ? 'global' : 'local'} #{'others' if others_warning}" %>
          <pre data-type="textarea" data-others-warning="<%= others_warning %>" data-url="<%= command_path(b.value) %>" class="<%= klass %>"><%= b.text %></pre>
        </div>
        <%= edit_command_link command %>
        <%= content_tag :span, others, title: others_warning + " use this. Click edit for details.", class: 'glyphicon glyphicon-lock' if others_warning %>
      </div>
    <% end %>
  </div>

  <hr />

  <p>Add a command which is specific to your project</p>
  <%= form.text_area :command, class: "form-control", rows: 4, value: nil, placeholder: 'cap production deploy' %>
</fieldset>

<script>
  $(function() {
    var $localCommands = $('#commands pre.local');

    $('#commands').sortable();
    $.fn.editableform.buttons = <%= render('commands/buttons').inspect.html_safe %>;

    $localCommands.editable({
      mode: 'inline',
      send: 'always',
      toggle: 'dblclick',
      highlight: false,
      params: function(params) {
        return { command: { command: params.value } };
      },
      ajaxOptions: {
        type: 'PATCH',
        dataType: 'json'
      }
    });

    $localCommands.filter(".others").dblclick(function(){
      alert("Editing for " + $(this).data('others-warning') + ". If you do not want this, make a copy.");
      $($($(this).get(0)).siblings().get(0)).find('.editable-destroy').hide();
    });

    $('#commands pre').dblclick(function(){
      var $textarea = $($($(this).get(0)).siblings().get(0)).find('textarea');
      $textarea.attr('rows', ($(this).text().match(/\n/g) || []).length + 1);
    });

    $('#commands pre.global').dblclick(function(){
      var $warning = $('<div class="cannot-edit">Global commands cannot be edited inline, use the Admin UI.</div>')
      $(this).after($warning);
      $warning.fadeOut(3000);
      return false;
    });

    $('#commands').on('click', '.editable-destroy', function(event) {
      var editable = $(this).closest('div.col-lg-8').children('.pre-command');

      if(confirm('Are you sure you would like to remove this command from all stages?')) {
        $.ajax({
          method: 'DELETE',
          dataType: 'json',
          url: editable.data('url'),
          success: function() {
            editable.closest('.row').fadeOut();
          }
        });
      }

      event.preventDefault();
    });
  });
</script>
